<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}">
<title>用户登录界面</title>
<link href="assets/lib/css/login.css" rel="stylesheet" media="screen" type="text/css">
<link href="assets/lib/css/animate.css" rel="stylesheet" media="screen" type="text/css">
<link href="assets/lib/fonts/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="assets/lib/js/jquery3.2.js"></script>
<style>
    .span{
        display:block;
        margin-top:-25px;
        margin-left:40px;
        font-size:12px;
    }
</style>
</head>
<script type="text/javascript">
	$(function(){
	    //判断账号是否输入正确
        $("#account").blur(function(){
            alert("come in");
            var account=$("#account").val();
            var hint=$("#hintaccount");
            var reg1=/\S/;
            if(!reg1.test(account)){
                hint.text("账号不能为空");
                hint.css("color","red");
                return false;
            }
            if(account.length==11){
                var reg3=/^\d{11}$/;
                if(reg3.test(account)){
                    hint.text("账号输入正确");
                    hint.css("color","green");
                    return true;
                }else{
                    hint.text("账号可以是手机号码");
                    hint.css("color","red");
                    return false;
                }
            }else{
                var reg2=/^.\w+$/;
                var reg4=/^\w{5,10}$/;
                if(!reg2.test(account)){
                     hint.text("账号必须由数字，字母，下划线组成");
                    hint.css("color","red");
                    return false;
                }else if(!reg4.test(account)){
                    hint.text("账号的长度在５～１0为之间");
                    hint.css("color","red");
                    return false;
                }else{
                    hint.text("账号输入正确");
                    hint.css("color","green");
                    return true;
                }
            }
        });
        //判断密码是否输入正确
        $("#pwd").blur(function(){
            var pwd=$("#pwd").val();
            var hint=$("#hintpwd");
            var reg1=/\S/;
            if(!reg1.test(pwd)){
                hint.text("密码不能为空");
                hint.css("color","red");
                return false;
            }
            var reg=/^.{6,10}$/;
            if(!reg.test(pwd)){
                    hint.text("密码的长度在６～１0为之间");
                    hint.css("color","red");
                    return false;
            }else{
                hint.text("账号输入正确");
                hint.css("color","green");
                return true;
            }
        });
	});
</script>
<body>
	<form action="/servlet/regection" method="post" id="wrapper">
        <div id="box" class="animated bounceIn">
            <div id="top_header">
                <a href="#">
                    <img class="logo" src="assets/lib/img/logo.png" alt="logo">
                </a>
                <h5>
                    用户登录界面<br />
                    账号／手机号码
                </h5>
            </div>
            <di id="inputs">
                <div class="form-control">
                    <input id="account" name="account" type="text" value="18937949334">
                    </br>
                    <span class="span" id="hintaccount"></span>
                    <i class="fa fa-envelope-o"></i>
                </div>
                <div class="form-control">
                    <input id="pwd" name="pwd" type="password">
                    </br>
                    <span class="span" id="hintpwd"></span>
                    <i class="fa fa-key"></i>
                </div>
                <input type="submit" value="登录">
            </di>
        </div>
    </form>
</body>
</html>